<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1. 在浏览器端创建一个websocket实例对象
    // 一旦创建就会自动建立连接
    var ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello");

    // 2. 监听建立连接
    ws.onopen = function(evt) { 
      console.log("连接已经建立 ...");
      // 给服务端发送消息
      ws.send("大家好");
    };

    // 3. 监听从服务端返回消息
    ws.onmessage = function(evt) {
      console.log( "接收到服务端返回的消息: " + evt.data);
      // 关闭连接
      ws.close();
    };
    
    // 4. 监听连接关闭
    ws.onclose = function(evt) {
      console.log("连接已经关闭.");
    };      

  </script>
</body>
</html>